<template>
    <div>
        <div class="p-4">
            <el-form :inline="true" :model="searchParams" class="demo-form-inline">
                <el-form-item label="关键字搜索">
                    <el-input v-model="searchParams.nameKeyword" placeholder="关键字" clearable />
                </el-form-item>
                <el-form-item label="操作时间">
                    <!-- <el-input v-model="searchParams.nameKeyword" placeholder="操作时间" clearable /> -->
                    <!-- <el-date-picker v-model="dateValue" type="datetimerange" range-separator="-" clearable
                        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
                        end-placeholder="结束时间" @change="changeCreateTime" /> -->
                    <el-date-picker v-model="dateValue" type="date" clearable placeholder="操作时间" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" @change="changeCreateTime" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">搜索</el-button>
                </el-form-item>
            </el-form>
            <div class="mt-3">
                <el-table ref="tableRef" :data="data" fit border style="width: 100%" row-key="id"
                    @row-click="handleRowClick" @selection-change="handleSelectionChange"
                    :row-class-name="getTableRowClassName">
                    <el-table-column align="center" type="selection" width="55" />
                    <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="60" />

                    <el-table-column align="center" fit label="操作账号" prop="loginName" sortable />

                    <el-table-column align="center" fit label="操作人名称" prop="userName" sortable />

                    <!-- <el-table-column align="center" fit label="操作人" prop="operId" sortable /> -->
                    <el-table-column align="center" fit label="操作人的IP" prop="operIp" sortable />

                    <el-table-column align="center" fit label="操作的功能" prop="logValue" sortable />

                    <!-- <el-table-column align="center" fit label="请求的方法" prop="classMethod" sortable /> -->



                    <!-- <el-table-column align="center" fit label="请求的参数" prop="requestArgs" sortable /> -->

                    <!-- <el-table-column align="center" fit label="返回参数" prop="resArg" sortable /> -->

                    <el-table-column align="center" fit label="操作时间" prop="createTime" sortable />

                    <el-table-column align="center" fit label="操作耗时()" prop="takeTime" sortable />

                    <el-table-column fixed="right" fit align="center" label="操作">
                        <template #default="scope">
                            <el-button v-if="btnShow('001')" link type="primary" size="small"
                                @click="see(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="mt-3">
                <el-pagination v-model:current-page="searchParams.pageNumber" v-model:page-size="searchParams.pageSize"
                    :page-sizes="[10, 20, 30, 50]" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalRow" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>


        <!-- 日志详情 -->
        <el-dialog v-model="openDialog" title="日志详情" width="60%" center>
            <div class="p-4">
                <el-form label-position="left" label-width="auto">
                    <el-form-item label="操作时间">
                        <el-input v-model="logItem.createTime" disabled />
                    </el-form-item>
                    <el-form-item label="操作人">
                        <el-input v-model="logItem.userName" disabled />
                    </el-form-item>
                    <el-form-item label="操作功能">
                        <el-input v-model="logItem.logValue" disabled />
                    </el-form-item>
                    <el-form-item label="用时(毫秒)">
                        <el-input v-model="logItem.takeTime" disabled />
                    </el-form-item>
                    <el-form-item label="入参">
                        <el-input v-model="logItem.requestArgs" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                            disabled />
                    </el-form-item>
                    <el-form-item label="出参">
                        <el-input v-model="resArg" autosize type="textarea" disabled />
                        <!-- <json-viewer :json-data="logItem.resArg" /> -->
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
    </div>
</template>


<script setup>
import { indexMethod } from '@/config/utils';
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import { getLogs, getBtnList, getLog } from '@/config/api.js'
//获取当前路由信息
import { useRoute } from 'vue-router';
const route = useRoute();
//获取按钮权限
const btns = ref([])
const getBtns = () => {
    let data = {
        path: route.path
    }
    getBtnList(data).then(res => {
        btns.value = res.data
    })
}
getBtns();
const btnShow = (codeNo) => {
    let flag = btns.value.includes(codeNo);
    return flag
}

//搜索条件
const dateValue = ref([])
const changeCreateTime = (value) => {
    console.log('value ==> {}', value);
    searchParams.value.createTime = value
    // searchParams.value.endTime = value[1]
}
const totalRow = ref(0)
const searchParams = ref({
    pageNumber: 1,
    pageSize: 10
})

//表格数据
const tableRef = ref()
const data = ref([])

//选择的行
const selectedRow = ref({})
//单击行
const handleRowClick = (row) => {
    console.log('row ==> {}', row);
    selectedRow.value = row
    tableRef.value.clearSelection()
    tableRef.value.toggleRowSelection(row)
}
//设置行样式
const getTableRowClassName = ({ row }) => {
    if (row.id === selectedRow.value.id) {
        return 'tableRowStyle'
    }
    return ''
}
//获取列表数据
function getList() {
    //执行查询数据
    getLogs(searchParams.value).then(res => {
        if (res.code == 200) {
            data.value = res.data.records
            totalRow.value = res.data.totalRow
        }
    })
}

//分页参数处理
const handleSizeChange = (e) => {
    searchParams.value.pageSize = e
    getList()
}
const handleCurrentChange = (e) => {
    searchParams.value.pageNumber = e
    getList()
}
getList();

//查看详情
const openDialog = ref(false)
const logItem = ref({})
const resArg = ref('')
const see = (item) => {
    logItem.value = {}
    let data = {
        id: item.id
    }
    getLog(data).then(res => {
        if(res.code == 200){
            openDialog.value = true
            logItem.value = res.data
            resArg.value = res.data.resArg//JSON.stringify(res.data.resArg, null, 2)
        }
        else{
            ElMessage.error(res.msg)
        }
    })
    
}
</script>

<style scoped></style>